<html>
  <head>
	<style type="text/css">
	
		#content{
			font-family: Helvetica;
			font-size: 11px;
		}
		
		
		#map { width:100%; height:100%; }
    
        .label { 
			position: relative; 
			left: -50%; top: -8px; 
			white-space: nowrap; 
			color: red; font-family: Helvetica;
			font-size:9pt; z-index:1000;
			text-shadow: 1px 1px 10px #000; 
		}
	</style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>    
	<script type="text/javascript">


		
		var dataSourceUrl = "https://docs.google.com/spreadsheet/ccc?key=0AhF2aqm_1ItZdDZQdXhwQ1Y4VWFrVzVFYUplbktmZHc";
		var onlyInfoWindow;
	
		google.load("visualization", "1");
		google.load("maps", "3", {other_params:"sensor=false"});

		google.setOnLoadCallback(getData);
		


		function getData() {
			var query = new google.visualization.Query(dataSourceUrl);
			query.send(handleQueryResponse);
		}
		
		function handleQueryResponse(response) {
			if (response.isError()) {
				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
				return;
			}

			var data = response.getDataTable();
            
            var mapping = {
				disableDefaultUI:false,
				scrollWheel:false,
				zoom: 11,
				center: new google.maps.LatLng(40.785611,-73.946056),
				mapTypeId: google.maps.MapTypeId.TERRAIN

			};
		
			var map = new google.maps.Map(document.getElementById("map"), mapping);
			
			var bubbleMap = new Bubble(data);		
			
			bubbleMap.setMap(map);
			
			
			var mapStyles = [
{
    featureType: "road", 
    stylers: [
      {visibility: "on"},
      {lightness: +20},
    ]
  }
  
  ];

map.setOptions({styles: mapStyles});

var schoolDistricts = new google.maps.LatLng(41.850033, -87.6500523);

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '3621394'

  },
  styles: [{
  polygonOptions: {
    fillColor: "#F70505",
    fillOpacity: 0
    }
  }
  ]}
  );//color of area map

layer.setMap(map);
  }
 
var CustomTileLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        return "http://tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

map.overlayMapTypes.push(CustomTileLayer);
  
var input = document.getElementById('search'); 
mapCanvas.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
var options = { 
  types: ['establishment'] 
}; 

var autocomplete = new google.maps.places.Autocomplete(input, 
options); 
google.maps.event.addListener(autocomplete, "place_changed", function() 
{ 
  var place = autocomplete.getPlace(); 
   mapCanvas.panTo(place.geometry.location); 
}); 


	</script>
	<script type="text/javascript" src="overlay_bubble.js"></script>
	<title>Concentration of students with special needs by school</title></head>
  <body>
  <div id="map"></div>
  </body>  
</html>